/*
*   @Author: 1296
*   @Date: 2025-03-12
*   @Description: 默认导航栏组件（包含登录/注册按钮），实现等比例缩放
*/

<template>
  <div class="navbar">
    <img class="logo" src="@/assets/logo.png" alt="Logo" @click="toTest"/>
    <img class="title" src="@/assets/title.png" alt="Title" />
    <!-- 导航菜单按钮 -->
    <button
        v-for="(item, index) in menuItems"
        :key="index"
        :class="{'menu-button': true, 'active': activeIndex === index}"
        @click="navigateTo(index)"
        :style="{ left: buttonPositions[index] }"
    >
      {{ $t(item) }}
    </button>
    <!-- 登录/注册按钮 -->
    <button class="login-button" @click="goToLogin">
      {{ $t('LoginAndRegister') }}
    </button>
  </div>
</template>

<script>

export default {
  name: "DefaultNavbar",
  data() {
    return {
      activeIndex: 0,
      menuItems: ["HomePage", "PersonalPage", "AboutProject", "AboutUs"],
      buttonPositions: ["34.3%", "47.3%", "60.4%", "73.4%"],
      routes: ["/homePage", "/personalPage", "/aboutProject", "/aboutUs"]
    };
  },
  watch: {
    $route() {
      this.updateActiveIndex();
    },
    // 监听事件总线的 navIndex 变化
    '$eventBus.navIndex'(newIndex) {
      this.activeIndex = newIndex;
    }
  },
  methods: {
    navigateTo(index) {
      this.activeIndex = index;
      this.$router.push(this.routes[index]);
    },
    goToLogin() {
      this.$router.push('/loginAndRegister');
    },
    updateActiveIndex() {
      const currentRoute = this.$route.path;
      const index = this.routes.indexOf(currentRoute);
      this.activeIndex = index !== -1 ? index : 0;
    },
    toTest() {
      this.$router.push('/test');
    }
  },
  mounted() {
    this.updateActiveIndex();
  }
};
</script>

<style scoped>
.navbar {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: calc(100vw * (100 / 1920));
  margin: 0 auto;
  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 15.63%, rgba(15,64,245,0.85) 100%);
}

.logo {
  position: absolute;
  left: 5.42%;
  top: calc(5px / 1920 * 100vw);
  width: 5.42%;
  height: auto;
}

.title {
  position: absolute;
  left: 13.33%;
  top: calc(5px / 1920 * 100vw);
  width: 20%;
  height: auto;
}

.menu-button {
  position: absolute;
  top: 0;
  width: 10.42%;
  height: 100%;
  background-color: transparent;
  color: black;
  font-size: 1.2vw;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.5s, color 0.5s;
}

.active {
  background-color: white;
  color: black;
  animation: slideUp 0.5s;
}

@keyframes slideUp {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}

.login-button {
  position: absolute;
  left: calc(1709 / 1920 * 100%);
  top: 25%;
  width: calc(150 / 1920 * 100%);
  height: 50%;
  background-color: #ffffff;
  color: #000;
  font-size: 1.04vw;
  border: 1px solid #ccc;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, color 0.3s;
}
</style>
